<template>
  <div class="app-container">
    <div style="margin: 20px" />
    <div class="box">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
        :rules="rules"
      >
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="formLabelAlign.name" />
        </el-form-item>
        <el-form-item label="商品简介" prop="descriptions">
          <el-input v-model="formLabelAlign.descriptions" type="textarea" />
        </el-form-item>
        <el-form-item label="商品主图">
          <el-upload
            ref="myupload"
            :class="[flag === true ? 'none' : 'show']"
            action="http://lanlianhua.work:8888/api/v1/common/file_upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="handleAvatarSuccess"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="formLabelAlign.coverImg" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="tipShow">添加</el-button>
        </el-form-item>
      </el-form>
      <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <span>请确认是否添加此分类？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="noneTip">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { addCategory } from "@/api/category";

export default {
  data() {
    return {
      labelPosition: "top",
      formLabelAlign: {
        name: "",
        descriptions: "",
        coverImg: "",
      },
      dialogVisible: false,
      flag: false,
      centerDialogVisible: false,
      rules: {
        name: { required: true, message: "请输入商品名称", trigger: "blur" },
        descriptions: {
          required: true,
          message: "请输入商品简介",
          trigger: "blur",
        },
      },
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    noneTip() {
      this.$message({
        showClose: true,
        message: "取消添加",
      });
      const obj = {
        name: "",
        descriptions: "",
        coverImg: "",
      };
      this.formLabelAlign = obj;
      this.handleRemove();
    },
    handleRemove(file, fileList) {
      this.dialogVisible = false;
      this.centerDialogVisible = false;
      this.$refs["myupload"].clearFiles();
      setTimeout(() => {
        this.flag = false;
      }, 1000);
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true;
    },
    tipShow() {
      if (
        this.formLabelAlign.name &&
        this.formLabelAlign.descriptions &&
        this.formLabelAlign.coverImg
      ) {
        this.centerDialogVisible = true;
      } else {
        this.$message({
          message: "请将商品信息补充完整",
          type: "warning",
        });
      }
    },
    async submitForm() {
      await addCategory(this.formLabelAlign)
        .then((res) => {
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success",
          });
          const obj = {
            name: "",
            descriptions: "",
            coverImg: "",
          };
          this.formLabelAlign = obj;
          this.handleRemove();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    handleAvatarSuccess(res, file) {
      this.flag = true;
      this.formLabelAlign.coverImg = "http://lanlianhua.work:8888" + res.info;
    },
  },
};
</script>
<style>
.app-container .box {
  width: 55vw;
  margin: 0 auto;
}
.none .el-upload--picture-card {
  display: none;
}
.show .el-upload--picture-card {
  display: inline-block;
}
</style>
